<template>
  <div id="bar-chart-monitor"></div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

onMounted(() => {
  const chartDom = document.getElementById('bar-chart-monitor')!;
  const myChart = echarts.init(chartDom);

  const data = [120, 220, 150, 80, 70, 110, 130];
  const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];

  // 创建渐变颜色函数
  const getGradientColor = (value: number): echarts.graphic.LinearGradient => {
    const colorStops = [
      { offset: 0, color: '' },
      { offset: 1, color: '' }
    ];

    if (value >= 180) {
      colorStops[0].color = '#ff6b6b';
      colorStops[1].color = '#c92a2a';
    } else if (value >= 140) {
      colorStops[0].color = '#ff922b';
      colorStops[1].color = '#e67700';
    } else if (value >= 120) {
      colorStops[0].color = '#51cf66';
      colorStops[1].color = '#2f9e44';
    } else if (value >= 100) {
      colorStops[0].color = '#20c997';
      colorStops[1].color = '#099268';
    } else if (value >= 80) {
      colorStops[0].color = '#ffd43b';
      colorStops[1].color = '#f08c00';
    } else {
      colorStops[0].color = '#a9e34b';
      colorStops[1].color = '#5c940d';
    }

    return new echarts.graphic.LinearGradient(0, 0, 0, 1, colorStops);
  };

  const option = {
    title: {
      text: '近一周监测数据',
      left: 'center',
      textStyle: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#2c3e50'
      },
      top: 15
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      padding: [10, 15],
      textStyle: {
        color: '#333',
        fontSize: 14
      },
      formatter: (params: any) => {
        const value = params[0].value;
        const day = params[0].name;
        const color = getGradientColor(value).colorStops[1].color;

        return `
          <div style="font-weight: bold; margin-bottom: 5px;">${day}</div>
          <div style="display: flex; align-items: center;">
            <div style="width: 12px; height: 12px; background: ${color}; border-radius: 50%; margin-right: 8px;"></div>
            <div>监测值: <b style="color: ${color};">${value}</b></div>
          </div>
        `;
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: days,
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 14,
        fontWeight: 'bold',
        margin: 10
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '监测值',
      nameTextStyle: {
        color: '#666',
        fontSize: 14,
        padding: [0, 0, 0, 10]
      },
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      }
    },
    series: [{
      name: '监测数据',
      type: 'bar',
      data: data.map(value => ({
        value,
        itemStyle: {
          color: getGradientColor(value),
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 8,
          shadowOffsetY: 4
        }
      })),
      barWidth: '35%',
      label: {
        show: true,
        position: 'top',
        color: '#333',
        fontSize: 14,
        fontWeight: 'bold',
        formatter: '{c}'
      },
      itemStyle: {
        borderRadius: [8, 8, 0, 0]
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 15,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        },
        label: {
          fontSize: 16,
          color: '#2c3e50'
        }
      },
      animation: true,
      animationDuration: 1500,
      animationEasing: 'elasticOut'
    }],
    backgroundColor: '#fff',
    textStyle: {
      fontFamily: 'Arial, sans-serif'
    }
  };

  myChart.setOption(option);

  // 响应式调整
  window.addEventListener('resize', () => myChart.resize());
});
</script>

<style scoped>
#bar-chart-monitor {
  height: 500px;
  width: 350px;
  margin: 20px auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: all 0.3s ease;
}

#bar-chart-monitor:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

</style>